<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    
    <ui:define name="head">
        <style>
            body .custom-indicator-galleria .ui-galleria-indicators {
                padding: 1rem .25rem 1rem 0;
            }
            
            body .custom-indicator-galleria .ui-galleria-indicator {
                width: 100%;
                text-align: right;
                font-weight: bold;
                padding: .357rem .75rem .357rem .75rem;
                margin-bottom: 0 !important;
            }
            
            body .custom-indicator-galleria .ui-galleria-indicator {
                color: #e9ecef;
                background-color: transparent;
                cursor: pointer;
                transition: background-color 0.2s, color 0.2s;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }

            body .custom-indicator-galleria .ui-galleria-indicator.ui-state-highlight {
                background-color: var(--primary-color);
                color: var(--primary-color-text);
            }
        </style>
    </ui:define>

    <ui:define name="title">
        Galleria <span class="subitem">Indicator</span>
    </ui:define>

    <ui:define name="description">
        Indicators allow quick navigation between the items.
    </ui:define>

    <ui:param name="documentationLink" value="/components/galleria"/>
    <ui:param name="widgetLink" value="Galleria"/>

    <ui:define name="implementation">
        <div class="card">
            <h5>Indicators with Click Event</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Indicators with Hover Event</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Inside Content</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" showIndicatorsOnItem="true" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Positioned at Top</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" showIndicatorsOnItem="true" indicatorsPosition="top" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Positioned at Left</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" showIndicatorsOnItem="true" indicatorsPosition="left" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Positioned at Right</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" showIndicatorsOnItem="true" indicatorsPosition="right" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
            </p:galleria>
        </div>
        
        <div class="card">
            <h5>Indicator Template</h5>
            <p:galleria value="#{galleriaView.photos}" var="photo" varStatus="status" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
                        showThumbnails="false" showIndicators="true" changeItemOnIndicatorHover="true" showIndicatorsOnItem="true" indicatorsPosition="left"
                        styleClass="custom-indicator-galleria" style="max-width: 640px">
                <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
                <f:facet name="indicator">
                    <span class="indicator-text">
                        #{status.index + 1}
                    </span>
                </f:facet>
            </p:galleria>
        </div>
    </ui:define>

</ui:composition>
